<template>
  <div class="order">
    <a-card title="我审核的" style="width: 100%">
      <div slot="extra">
        <a-input-search placeholder="请输入京东商品id进行查询" style="width: 250px" v-model="searchipt" @search="onSearch" />
      </div>
      <div class="goods_table">
        <a-table
          :columns="columns"
          :rowKey="goodsList => goodsList.id"
          :dataSource="goodsList"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination">
          <div slot="goods_img" slot-scope="goods_img">
            <img :src="goods_img" style="width:120px;" />
          </div>
          <div slot="goods_copywriting" slot-scope="row">
            <div class="copy">
              {{ row.goods_copywriting }}
            </div>
          </div>
          <span slot="coupon" slot-scope="row">
            <a :href="row.coupon_url" target="_blank" rel="noopener noreferrer" class="coupon_a">
              <span>劵</span><em>￥{{ row.coupon_discount }}</em>
            </a>
            <div style="margin-top:8px">
              <div><span>剩余数量:</span><em>{{ row.coupon_surplus_num }}</em></div>
              <div><span>总数量:</span><em>{{ row.coupon_all_num }}</em></div>
            </div>
          </span>
          <div slot="goods_start_time" slot-scope="row">
            <div>{{ row.goods_start_time }}</div>
            /
            <div>{{ row.goods_end_time }}</div>
          </div>
          <div slot="goods_price" slot-scope="row">
            <span style="color:orange">¥{{ row.goods_after_price }}</span>
            /
            <span>¥{{ row.goods_price }}</span>
          </div>
          <div slot="commission_bl" slot-scope="row">
            <span style="color:orange">{{ row.commission_bl }}%</span>
          </div>
          <div slot="error_info" slot-scope="row">
            <span>{{ row.error_info }}</span>
          </div>
          <div slot="phone" slot-scope="row">
            <a-popover :title="row.phone" placement="right">
              <template slot="content">
                <p>今日上单通过数量:{{ row.today_num }}</p>
                <p>今日上单总数量:{{ row.today_all_num }}</p>
                <p>今日上单通过率:{{ row.today_all_num==0?'0':((row.today_num/ row.today_all_num)*100).toFixed(2) }}%</p>
                <p>上单通过总数量:{{ row.all_success_num }}</p>
                <p>上单总数量:{{ row.all_goods_num }}</p>
                <p>上单总通过率:{{ row.all_goods_num==0?'0':((row.all_success_num/ row.all_goods_num)*100).toFixed(2) }}%</p>
                <p>商品平均销量:{{ row.avg_goods_num }}</p>
              </template>
              <div>
                {{ row.phone }}
              </div>
            </a-popover>
          </div>
          <!-- <div slot="active" slot-scope="row">
            <span class="goodsurl" @click="doPassGoods(row.record_id)">过</span>
            <span class="goodsurl quan" @click="visible=true">拒</span>
            <a-modal
              title="请输入拒绝理由"
              :visible="visible"
              :confirm-loading="confirmLoading"
              ok-text="确认"
              cancel-text="取消"
              @ok="doRefuseGoods(row.record_id)"
              @cancel="handleCancel">
              <a-input placeholder="请输入拒绝理由!(选填)" v-model="errorinfo" />
            </a-modal>
          </div>
        </a-table> -->
        </a-table>
      </div>
    </a-card>

  </div>
</template>

<script>
  import {
    getMyExamineGoods
  } from '@/api/audit'
  import Moment from 'moment'

  export default {
    name: 'Order',
    data () {
      return {
        searchipt: '',
        visible: false,
        confirmLoading: false,
        count: 0,
        columns: [{
            title: 'ID',
            width: 150,
            align: 'center',
            dataIndex: 'record_id',
            scopedSlots: {
              customRender: 'record_id'
            }
          },
          {
            title: '商品名称',
            align: 'center',
            dataIndex: 'goods_short_name',
            scopedSlots: {
              customRender: 'goods_short_name'
            }
          },
          {
            title: '商品图片',
            align: 'center',
            dataIndex: 'goods_img',
            scopedSlots: {
              customRender: 'goods_img'
            }
          },
          {
            title: '文案',
            align: 'center',
            width: 400,
            // dataIndex: 'goods_copywriting',
            scopedSlots: {
              customRender: 'goods_copywriting'
            }
          },
          {
            title: '优惠/原价',
            align: 'center',
            scopedSlots: {
              customRender: 'goods_price'
            }
          },
          {
            title: '佣金比例',
            align: 'center',
            // dataIndex: 'commission_bl',
            scopedSlots: {
              customRender: 'commission_bl'
            }
          },
          {
            title: '优惠劵',
            align: 'center',
            // dataIndex: 'status',
            scopedSlots: {
              customRender: 'coupon'
            }
          },
          {
            title: '推广人',
            align: 'center',
            // dataIndex: 'phone',
            scopedSlots: {
              customRender: 'phone'
            }
          },
          {
            title: '过期时间',
            align: 'center',
            // dataIndex: 'goods_start_time',
            scopedSlots: {
              customRender: 'goods_start_time'
            }
          },
          {
            title: '驳回理由',
            align: 'center',
            scopedSlots: {
              customRender: 'error_info'
            }
          }
        ],
        pagination: {
          pageSize: 15,
          page: 1
        },
        loading: false,
        goodsList: [
          //   {
          //   id: 11, // 商品表自增id
          //   goods_short_name: 'ces', // 商品短名称
          //   goods_class_id: '1000010', // 分类id
          //   goods_img: 'http://img11.360buyimg.com/mobilecms/s300x300_jfs/t1/104424/36/151/205414/5da8322cEb7a979bf/cfae07a0aaa17f9d.jpg!q30!q70.jpg', // 主图
          //   goods_xj_img: '1111', // 细节图
          //   goods_after_price: '10.00', // 卷后单价
          //   goods_price: '200.00', // 原价
          //   commission_bl: '20', // 佣金比例
          //   goods_end_time: 1590822442, // 商品到期时间
          //   status: 1, // 状态 1=待审核 2=审核成功 3驳回 4下架
          //   error_info:'驳回理由',
          //   item_id: '48200997426', // 京东商品id
          //   // 优惠卷链接
          //   coupon_url: 'https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoeWQgN5g8COpNhO4YT8BjgABlJjrENdCosf-Xvr7CzvcgUftd4ARvnNr416wy4EB9_iVgI-w',
          //   update_at: '2020-05-29 15:42:10', // 修改时间
          //   goods_class_name: '数码家电' // 分类名称
          // }
        ]
      }
    },

    computed: {

    },
    created () {
      this.getMyExamineGoods(1, 15)
    },
    mounted () {

    },
    methods: {
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getMyExamineGoods(params.page, 15)
      },
      onSearch (value) {
        // console.log(value)
        this.getMyExamineGoods(1, 15, this.searchipt)
      },
      // 获取自己审核的商品列表
      getMyExamineGoods (page, pagesize, goodsid) {
        this.loading = true

        getMyExamineGoods({
            page: page,
            pagesize: parseInt(pagesize),
            goods_id: goodsid
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('商品列表返回', res)
              this.count = res.data.count
              this.goodsList = res.data.data
              for (let i = 0; i < this.goodsList.length; i++) {
                this.goodsList[i].goods_start_time = Moment(parseInt(this.goodsList[i].goods_start_time + '000'))
                  .format(
                    'YYYY-MM-DD HH:mm:ss')
                this.goodsList[i].goods_end_time = Moment(parseInt(this.goodsList[i].goods_end_time + '000')).format(
                  'YYYY-MM-DD HH:mm:ss')
              }
              const pagination = {
                ...this.pagination
              }
              pagination.total = res.data.count
              this.pagination = pagination
              this.loading = false
            } else {
              this.$message.info(res.msg)
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .display {
    display: flex;
  }

  .goods_table {
    .copy {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }

    .coupon_a {
      display: block;
      font-size: 0;
      cursor: pointer;
      margin-top: 1px;

      span {

        display: inline-block;
        padding: 0 5px;
        background: #fd7100;
        color: #fff;
        font-size: 12px;
        background: linear-gradient(0deg, rgba(255, 75, 66, 1), rgba(255, 117, 60, 1));
        height: 20px;
        vertical-align: middle;
        line-height: 20px;
      }

      em {
        display: inline-block;
        padding: 0 8px;
        border: 1px solid #fd7100;
        color: #fd7100;
        font-size: 12px;
        height: 20px;
        vertical-align: middle;
        line-height: 18px;
      }
    }

    .goodsurl {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 28px;
      background-color: #fff;
      margin-left: 10px;
      color: #000;
      font-size: 18px;
      // font-weight: bolder;
      text-align: center;
      border-radius: 50%;
      // padding: 5px;
      color: gray;
      cursor: pointer;
      border: 1px solid gray;
    }

    .ant-table-row:hover {
      .goodsurl {
        background-color: green;
        color: #fff;
        // font-weight: bolder;
        border: none;
      }

      .quan {
        background-color: orange;
      }
    }
  }
</style>
